<script setup lang="ts">
import { fetchAreaOpusApi } from '@/api/MicroScene/MicroSceneApi';
import { computed, onMounted, ref, watch } from 'vue';
import type { AreaOpus } from '@/types/micro-scene';
import OpusCard from '@/views/MicroScene/home/components/Card/OpusCard.vue';
import { Empty } from 'ant-design-vue';

const props = defineProps<{
  areaId: string;
}>();

const opusFilters = ref<string[]>([]);
const selectedFilter = ref<string>('全部');
const areaId = ref<number>(Number(props.areaId));
const query = ref<string>('');
const pageIndex = ref<number>(1);
const pageSize = 12;
const opusList = ref<AreaOpus[]>([]); // 存储作品列表数据

// 过滤空作品数据
const filteredOpusList = computed(() => opusList.value.filter(opus => opus));

const fetchAreaOpus = async () => {
  try {
    const params = {
      areaId: areaId.value,
      keyword: query.value,
      tag: selectedFilter.value === '全部' ? '' : selectedFilter.value,
      page: pageIndex.value,
      size: pageSize,
    }

    const res = await fetchAreaOpusApi(params);
    opusList.value = res.records || [];
  }
  catch (error) {
    console.error('获取作品数据失败:', error);
  }
}

const onFilterBtnClicked = async (filter: string) => {
  selectedFilter.value = filter;
  pageIndex.value = 1;
  await fetchAreaOpus(); // 切换标签时重新获取数据
};

// 监听 props.areaId 的变化
watch(
  () => props.areaId,
  (newAreaId) => {
    areaId.value = Number(newAreaId);
    // 重置分页和筛选条件
    pageIndex.value = 1;
    selectedFilter.value = '全部';
    query.value = '';
    // 重新获取数据
    fetchAreaOpus();
  },
);

onMounted(async () => {
  await fetchAreaOpus();
});
</script>

<template>
  <a-layout style="display: flex; flex-direction: column; border-radius: 0.5rem; background-color: transparent;">
    <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
      <span style="font-size: 2rem; font-weight: bold; color: rgb(34, 95,245); position: relative; width: fit-content;">
        作品展示
        <img
          src="@/assets/title_star.svg"
          alt="作品展示"
          style="width: 1.5rem; height: 1.5rem; position: absolute; right: -2rem;"
        >
      </span>

      <div style="display: flex; gap: 0.5rem; align-items: center;">
        <a-input-search
          v-model:value="query"
          placeholder="请输入关键词搜索"
          style="width: 20rem;"
          @search="fetchAreaOpus"
        />
      </div>
    </div>

    <a-flex style="flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0rem 0rem 0rem;">
      <a-button
        v-for="option in opusFilters"
        :key="option"
        :type="option === selectedFilter ? 'primary' : 'default'"
        style="font-size: 14px; border: none;"
        @click="onFilterBtnClicked(option)"
      >
        {{ option }}
      </a-button>
    </a-flex>

    <!-- 作品列表 -->
    <div style="margin-top: 1rem;">
      <template v-if="filteredOpusList.length > 0">
        <a-row :gutter="[8, 8]">
          <a-col v-for="opus in filteredOpusList" :key="opus.phaseOpusId" :span="12">
            <OpusCard :opus="opus" />
          </a-col>
        </a-row>
      </template>
      <template v-else>
        <a-empty
          :image="Empty.PRESENTED_IMAGE_SIMPLE"
          description="当前专区暂无作品"
          style="margin-top: 4rem;"
        />
      </template>
    </div>
  </a-layout>
</template>

<style scoped>
</style>
